<template>
  <Table
    ref="tableRef"
    :url="URL_QUERYUSERLIST"
    :columns="data.columns"
    :handles="data.handles"
    :toolbar="data.toolbar"
    :query="data.query"
    :params="{ unit: false }"
    listKey="list"
  ></Table>
</template>

<script lang="ts" setup name="enterpriseUserList">
import Table from '@/components/table/index.vue';
import { USER_TYPE } from '@/utils/dictionaries';
import {
  URL_QUERYUSERLIST,
  moreCharging,
  resetPwd,
  frozenUser,
  deleteUser,
  URL_USERIMPORT,
  EXPORT_USER,
} from '@/service/apis/user';
import { getRandom6, getMd5, exportFile } from '@/utils/utils';

const router = useRouter();

const tableRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  emit('get-update', (flag: boolean) => {
    if (flag) {
      tableRef.value?.getData();
    }
  });
});

const data = reactive({
  columns: [
    {
      prop: 'channelName',
      label: '平台运营商',
    },
    {
      prop: 'orgName',
      label: '归属企业',
    },
    {
      prop: 'accountNumber',
      label: '用户账号',
    },
    {
      prop: 'userName',
      label: '用户姓名',
    },
    {
      prop: 'createTime',
      label: '注册时间',
    },
    {
      prop: 'plateNumber',
      label: '车牌号',
    },
    {
      prop: 'mobile',
      label: '手机号',
    },
    {
      prop: 'label',
      label: '绑定标签',
    },
    {
      prop: 'experienceValue',
      label: '经验值',
      template: (row: any, index: number) => {
        return String(row.experienceValue);
      },
    },
    {
      prop: 'isFrozen',
      label: '状态',
      template: (row: any, index: number) => {
        return row.isFrozen
          ? `<div style="color:#FA3939;">冻结</div>`
          : `<div style="color:#01C68B;">正常</div>`;
      },
    },
    {
      prop: 'moreCharging',
      label: '一号多充',
      type: 'switch',
      loading: false,
      permission: 'enterpriseUserList.move',
      handlebefore: () => {
        data.columns[10].loading = true;
        return new Promise((resolve) => {
          return resolve(true);
        });
      },
      handle: (row: any) => {
        moreCharging({
          id: row.id,
          moreCharging: row.moreCharging,
        }).then((res: any) => {
          if (res) {
            data.columns[10].loading = false;
            if (res.businessCode && res.businessCode !== '1') {
              row.moreCharging = !row.moreCharging;
            } else {
              row = res;
            }
          }
        });
      },
    },
  ],
  handles: [
    {
      label: '详情',
      handle: (row: any) => {
        console.log('详情---', row);
        router.push({
          name: 'enterpriseUserDetail',
          query: { id: row.id },
        });
      },
    },
    {
      label: '用户钱包',
      color: '#01C68B',
      permission: 'enterpriseUserList.wallet',
      handle: (row: any) => {
        // console.log('详情---', row);
        router.push({
          name: 'enterpriseUserWallet',
          query: { id: row.id, key: 'enterpriseUserList' },
        });
      },
    },
    {
      label: '修改',
      permission: 'enterpriseUserList.edit',
      handle: (row: any) => {
        console.log('编辑---', row);
        router.push({
          name: 'enterpriseUserEdit',
          query: { id: row.id },
        });
      },
    },
    {
      label: '重置密码',
      permission: 'enterpriseUserList.reset',
      handle: (row: any) => {
        const pws = getRandom6();
        ElMessageBox.confirm(`是否确定将密码重置为${pws}？`, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          resetPwd({
            id: row.id,
            password: getMd5(pws),
          }).then((res: any) => {
            if (res) {
              row = res;
            }
          });
        });
      },
    },
    {
      label: '恢复',
      permission: 'enterpriseUserList.frozen',
      labelFun: (row: any) => {
        return row.isFrozen ? '恢复' : '冻结';
      },
      colorFun: (row: any) => {
        return row.isFrozen ? '#01C68B' : '#FA3939';
      },
      handle: (row: any) => {
        const msg = row.isFrozen
          ? '用户恢复后，可正常使用，确认执行本操作？'
          : '用户冻结后，将不能正常充电，确认执行本操作？';
        ElMessageBox.confirm(msg, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          frozenUser({
            id: row.id,
            isFrozen: !row.isFrozen,
          }).then((res: any) => {
            if (res) {
              row.isFrozen = res.isFrozen;
            }
          });
        });
      },
    },
    {
      label: '删除',
      permission: 'enterpriseUserList.delete',
      color: '#FA3939',
      handle: (row: any) => {
        ElMessageBox.confirm('此操作将永久删除该数据，是否继续？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          deleteUser({
            id: row.id,
          }).then((res: any) => {
            if (res) {
              tableRef.value.getData();
            }
          });
        });
      },
    },
  ],
  toolbar: [
    {
      label: '新增',
      permission: 'enterpriseUserList.add',
      icon: 'icon-add',
      type: 'primary',
      handle: (row: any) => {
        router.push({
          name: 'enterpriseUserAdd',
        });
      },
    },
    {
      label: '模板下载',
      permission: 'enterpriseUserList.import',
      icon: 'icon-download',
      type: 'primary',
      plain: true,
      url: '%E4%BC%81%E4%B8%9A%E7%94%A8%E6%88%B7%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx',
    },
    {
      label: '批量导入',
      permission: 'enterpriseUserList.import',
      icon: 'icon-import',
      type: 'primary',
      plain: true,
      import: true,
      url: URL_USERIMPORT,
    },
    {
      label: '导出',
      permission: 'enterpriseUserList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        console.log('导出---', row);
        exportFile(EXPORT_USER, '企业用户列表', tableRef.value?.getForm());
      },
    },
  ],
  query: [
    {
      label: '用户账号',
      prop: 'accountNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '手机号',
      prop: 'mobile',
      comName: 'input',
      props: {
        placeholder: '请输入手机号',
      },
    },
    {
      label: '归属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属企业',
      },
    },
    {
      label: '平台运营商',
      prop: 'channelName',
      comName: 'input',
      props: {
        placeholder: '请输入平台运营商',
      },
    },
    {
      label: '状态',
      prop: 'isFrozen',
      comName: 'select',
      props: {
        placeholder: '请选择状态',
        change: (value: any) => {
          console.log(value);
        },
        options: USER_TYPE,
      },
    },
    {
      label: '用户姓名',
      prop: 'userName',
      comName: 'input',
      props: {
        placeholder: '请输入用户姓名',
      },
    },
  ],
});
</script>